<template>
  <q-page>
    <div class="ocr-id-card row fit q-pa-xl">
      <div class="col flex flex-center box-content">
        <img :src="img" v-if="img" />
        <q-file v-else ref="fileField" filled v-model="uploadField" label="点击或者拖拽服务簿到此处" input-style="height:200px;width:300px" :max-files="1"
          @input="fileChange">
          <template v-slot:prepend>
            <q-icon name="attach_file" />
          </template>
        </q-file>
      </div>
      <div class="col column bg-grey-1">
        <q-card class="q-ma-md q-ma-xl">
          <q-list bordered class="card-info">
            <q-item>
              <q-item-section>姓名：</q-item-section>
              <q-item-section>
                {{ serviceNote.name }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>性别：</q-item-section>
              <q-item-section>
                {{ serviceNote.sex }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>出生日期：</q-item-section>
              <q-item-section>
                {{ serviceNote.born }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>国籍：</q-item-section>
              <q-item-section>
                {{ serviceNote.nationality }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>注册号码：</q-item-section>
              <q-item-section>
                {{ serviceNote.id }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>签发机关：</q-item-section>
              <q-item-section>
                {{ serviceNote.issuedBy }}
              </q-item-section>
            </q-item>
            <q-separator />
            <q-item>
              <q-item-section>签发日期：</q-item-section>
              <q-item-section>
                {{ serviceNote.issuedOn }}
              </q-item-section>
            </q-item>
          </q-list>
        </q-card>

      </div>
    </div>
  </q-page>
</template>

<script>
import { imageOcr } from 'boot/api/index';
import { fileToBase64 } from 'components/utils/FileCompress';

export default {
  props: {},
  data() {
    return {
      uploadField: null,
      img: '',
      serviceNote: {
        id: '',
        name: '',
        sex: '',
        nationality: '',
        issuedBy: '',
        address: '',
        born: '',
        issuedOn: '',
      },
      serviceNoteEmpty: {
        id: '',
        name: '',
        sex: '',
        nationality: '',
        issuedBy: '',
        address: '',
        born: '',
        issuedOn: '',
      },
      title: '',
      clause: '',
      dateIssue: '',
      dateExpiry: '',
    };
  },
  computed: {},
  methods: {
    filterEn(value) {
      return value.replace(/[u4e00-u9fa5|,]+/ig, ' ');
    },
    trimColon(str) {
      if (str.indexOf(':') > -1) {
        [, str] = str.split(':');
      }
      if (str.indexOf('：') > -1) {
        [, str] = str.split('：');
      }
      return str;
    },
    trimNotCn(str) {
      return str.replace(/[u4e00-u9fa5|,]+/ig, '');
    },
    getDate(str) {
      str = this.trimColon(str);
      let date = `${str.split('日')[0]}日`;
      if (date.length > 11) {
        date = date.substring(date.length - 11);
      }
      return date;
    },
    // 判断字符串是否全是中文
    isAllChinese(str) {
      return /^[\u4E00-\u9FA5]+$/.test(str);
    },
    fileChange() {
      const startTime = new Date().getTime();
      fileToBase64(this.uploadField, (base64) => {
        this.img = base64;
        const base64String = base64.replace('data:', '').replace(/^.+,/, '');
        imageOcr('/predict/ch_pp-ocrv3', { images: [base64String] }).then((rs) => {
          this.serviceNote = { ...this.serviceNoteEmpty };
          if (rs.status === '000') {
            const { results } = rs;
            const result = results[0];
            const { data } = result;
            let all = '';
            for (let i = 0; i < data.length; i += 1) {
              const field = data[i];
              const { text } = field;
              all += text;
              if (text === '中国') {
                this.serviceNote.nationality = '中国';
              }
              if (text.indexOf('海事局') > -1) {
                this.serviceNote.issuedBy = text;
              }
            }
            const nameIdx = all.indexOf('姓名');
            const enNameIdx = all.indexOf('FULLNAME');

            const idIdx = all.indexOf('注册号码');
            const idIdxEnd = all.indexOf('REGISTRY NO');
            const sexIdx = all.indexOf('性别');
            const bornIdx = all.indexOf('出生日期');
            const bornIdxEnd = all.indexOf('DATEOFBIRTH');
            const issuedOnIdx = all.indexOf('签发日期：');
            const issuedOnIdxEnd = all.indexOf('ISSUEDON');

            this.serviceNote.name = all.substring(nameIdx + 2, enNameIdx);
            this.serviceNote.sex = all.substring(sexIdx + 2, sexIdx + 3);
            this.serviceNote.born = this.getDate(all.substring(bornIdx + 4, bornIdxEnd));
            this.serviceNote.issuedOn = this.getDate(all.substring(issuedOnIdx + 5, issuedOnIdxEnd));
            this.serviceNote.id = this.trimColon(all.substring(idIdx + 4, idIdxEnd));
            if (this.serviceNote.sex !== '男' && this.serviceNote.sex !== '女') {
              this.serviceNote.sex = all.indexOf('男') > -1 ? '男' : '女';
            }
            const endTime = new Date().getTime();
            this.$q.notify({
              message: `耗时：${(endTime - startTime) / 1000}秒`,
              position: 'bottom',
            });
          }
        });
      });
    },
  },
  created() { },
  mounted() {
  },
  watch: {
  },
};
</script>
<style lang="stylus">
.ocr-id-card
  .box-content
    overflow: hidden;
    background-color: #ececec;
    img
      width 100%
      height 100%
  .card-info
    .q-item
      div:first-child
        max-width 150px !important
        padding-left 20px

</style>
